<!--

=========================================================
* Pixel Pro Bootstrap 4 UI Kit
=========================================================

* Product Page: https://themesberg.com/product/ui-kits/pixel-pro-premium-bootstrap-4-ui-kit
* Copyright 2019 Themesberg (https://www.themesberg.com)

* Coded by https://themesberg.com

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

-->
<!DOCTYPE html>
<html lang="en">

<head>
    @@include('./_head.html', {
        "path": "../..",
        "title": "Pixel Documentation - Progress bars"
    })
</head>

<body>
    <a href="#doc-index" class="btn btn-lg btn-primary btn-block rounded-0 d-lg-none" data-toggle="collapse" data-target="#doc-index" aria-expanded="false" aria-controls="doc-index">
        <svg class="icon fill-white" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 17C3 17.5523 3.44772 18 4 18H20C20.5523 18 21 17.5523 21 17V17C21 16.4477 20.5523 16 20 16H4C3.44772 16 3 16.4477 3 17V17ZM3 12C3 12.5523 3.44772 13 4 13H20C20.5523 13 21 12.5523 21 12V12C21 11.4477 20.5523 11 20 11H4C3.44772 11 3 11.4477 3 12V12ZM4 6C3.44772 6 3 6.44772 3 7V7C3 7.55228 3.44772 8 4 8H20C20.5523 8 21 7.55228 21 7V7C21 6.44772 20.5523 6 20 6H4Z" />
        </svg>
        <span class="h6 text-white">Menu</span>
    </a>
    <section class="container-fluid py-4">
        <div class="row">
            @@include('./_docs-sidebar.html', {
                "path": "../..",
                "docs-path": ".."
            })
            <!-- Content -->
            <div class="col-12 col-lg-10">
                <div class="row">
                    <div class="col-xl-10 col-lg-9 px-xl-5 px-lg-3 px-md-2 py-md-4">
                        <div class="border-bottom">
                            <h1>Progress</h1>
                            <p class="lead text-dark">Use Pixel's progress bars featuring custom styles for bars and labels.
                            </p>
                            <a href="https://getbootstrap.com/docs/4.3/components/progress/" target="_blank" class="btn btn-icon btn-primary mb-3">
                                <span class="btn-inner-icon"><i class="fas fa-info-circle"></i></span>
                                <span class="btn-inner-text">Bootstrap 4 documentation</span>
                            </a>
                        </div>
                        <div id="example" class="my-5">
                            <h5 class="mb-3">Progress bar example</h5>
                            <p>Our progress bars have a main wrapper <code class="text-danger">.progress-wrapper</code> which contains a label, a percentage label and the standard Bootstrap 4 progress component.
                            </p>
                            <p>Change the value of the progress bar by updating the content inside <code class="text-danger">aria-valuenow="x"</code>.</p>
                            <p></p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-1" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-1" data-toggle="tab" href="#tab-content-1" role="tab" aria-controls="tab-link-1" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-2" data-toggle="tab" href="#tab-content-2" role="tab" aria-controls="tab-link-2" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent1">
                                            <div class="tab-pane fade show active" id="tab-content-1" role="tabpanel" aria-labelledby="tab-content-1">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info">
                                                                <div class="progress-label">
                                                                    <span class="text-primary">Luck</span>
                                                                </div>
                                                                <div class="progress-percentage">
                                                                    <span>10%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress">
                                                                <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info">
                                                                <div class="progress-label">
                                                                    <span class="text-primary">Skill</span>
                                                                </div>
                                                                <div class="progress-percentage">
                                                                    <span>15%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress">
                                                                <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info">
                                                                <div class="progress-label">
                                                                    <span class="text-primary">Power of will</span>
                                                                </div>
                                                                <div class="progress-percentage">
                                                                    <span>10%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress">
                                                                <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info">
                                                                <div class="progress-label">
                                                                    <span class="text-primary">Reason to remember the
                                                                        name</span>
                                                                </div>
                                                                <div class="progress-percentage">
                                                                    <span>100%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress">
                                                                <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-2" role="tabpanel" aria-labelledby="tab-content-2">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;div class=&#x22;row&#x22;&#x3E;
    &#x3C;div class=&#x22;col-12&#x22;&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-label&#x22;&#x3E;
                    &#x3C;span class=&#x22;text-primary&#x22;&#x3E;Luck&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;10%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-primary&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;10&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-label&#x22;&#x3E;
                    &#x3C;span class=&#x22;text-primary&#x22;&#x3E;Skill&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;15%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-primary&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;15&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-label&#x22;&#x3E;
                    &#x3C;span class=&#x22;text-primary&#x22;&#x3E;Power of will&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;10%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-primary&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;10&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-label&#x22;&#x3E;
                    &#x3C;span class=&#x22;text-primary&#x22;&#x3E;Reason to remember the name&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;100%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-primary&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;100&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
    &#x3C;/div&#x3E;
&#x3C;/div&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="colors" class="my-5">
                            <h5 class="mb-3">Changing colors</h5>
                            <p>In order to change the color of the text use modifier class <code class="text-danger">.text-*</code> (eg. <code class="text-danger">.text-primary</code>) inside the <code class="text-danger">.progress-label</code> element.
                            </p>
                            <p>To change the background color of the progress bar use the modified class <code class="text-danger">.bg-*</code> (eg. <code class="text-danger">.bg-primary</code>) on the <code class="text-danger">.progress-bar</code> element.
                            </p>
                            <p>Below are examples of a variety of colors:</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-2" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-3" data-toggle="tab" href="#tab-content-3" role="tab" aria-controls="tab-link-3" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-4" data-toggle="tab" href="#tab-content-4" role="tab" aria-controls="tab-link-4" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent2">
                                            <div class="tab-pane fade show active" id="tab-content-3" role="tabpanel" aria-labelledby="tab-content-3">
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info">
                                                                <div class="progress-label">
                                                                    <span class="text-primary">Primary Color</span>
                                                                </div>
                                                                <div class="progress-percentage">
                                                                    <span>50%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress">
                                                                <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info">
                                                                <div class="progress-label">
                                                                    <span class="text-secondary">Secondary Color</span>
                                                                </div>
                                                                <div class="progress-percentage">
                                                                    <span>60%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress">
                                                                <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info">
                                                                <div class="progress-label">
                                                                    <span class="text-tertiary">Tertiary Color</span>
                                                                </div>
                                                                <div class="progress-percentage">
                                                                    <span>60%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress">
                                                                <div class="progress-bar bg-tertiary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info">
                                                                <div class="progress-label">
                                                                    <span class="text-dark">Dark Color</span>
                                                                </div>
                                                                <div class="progress-percentage">
                                                                    <span>60%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress">
                                                                <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info">
                                                                <div class="progress-label">
                                                                    <span class="text-light">Light Color</span>
                                                                </div>
                                                                <div class="progress-percentage">
                                                                    <span>60%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress">
                                                                <div class="progress-bar bg-light" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info">
                                                                <div class="progress-label">
                                                                    <span class="text-gray">Gray Color</span>
                                                                </div>
                                                                <div class="progress-percentage">
                                                                    <span>60%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress">
                                                                <div class="progress-bar bg-gray" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info">
                                                                <div class="progress-label">
                                                                    <span class="text-success">Success Bar</span>
                                                                </div>
                                                                <div class="progress-percentage">
                                                                    <span>60%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress">
                                                                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info">
                                                                <div class="progress-label">
                                                                    <span class="text-info">Info Bar</span>
                                                                </div>
                                                                <div class="progress-percentage">
                                                                    <span>60%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress">
                                                                <div class="progress-bar bg-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info">
                                                                <div class="progress-label">
                                                                    <span class="text-danger">Danger Bar</span>
                                                                </div>
                                                                <div class="progress-percentage">
                                                                    <span>60%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress">
                                                                <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info">
                                                                <div class="progress-label">
                                                                    <span class="text-warning">Warning Bar</span>
                                                                </div>
                                                                <div class="progress-percentage">
                                                                    <span>60%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress">
                                                                <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-4" role="tabpanel" aria-labelledby="tab-content-4">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;div class=&#x22;row&#x22;&#x3E;
    &#x3C;div class=&#x22;col-lg-12&#x22;&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-label&#x22;&#x3E;
                    &#x3C;span class=&#x22;text-primary&#x22;&#x3E;Primary Color&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;50%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-primary&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;50&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-label&#x22;&#x3E;
                    &#x3C;span class=&#x22;text-secondary&#x22;&#x3E;Secondary Color&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;60%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-secondary&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;60&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-label&#x22;&#x3E;
                    &#x3C;span class=&#x22;text-tertiary&#x22;&#x3E;Tertiary Color&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;60%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-tertiary&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;60&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-label&#x22;&#x3E;
                    &#x3C;span class=&#x22;text-dark&#x22;&#x3E;Dark Color&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;60%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-dark&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;60&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-label&#x22;&#x3E;
                    &#x3C;span class=&#x22;text-light&#x22;&#x3E;Light Color&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;60%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-light&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;60&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;                        
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-label&#x22;&#x3E;
                    &#x3C;span class=&#x22;text-gray&#x22;&#x3E;Gray Color&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;60%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-gray&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;60&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-label&#x22;&#x3E;
                    &#x3C;span class=&#x22;text-success&#x22;&#x3E;Success Bar&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;60%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-success&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;60&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-label&#x22;&#x3E;
                    &#x3C;span class=&#x22;text-info&#x22;&#x3E;Info Bar&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;60%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-info&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;60&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-label&#x22;&#x3E;
                    &#x3C;span class=&#x22;text-danger&#x22;&#x3E;Danger Bar&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;60%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-danger&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;60&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-label&#x22;&#x3E;
                    &#x3C;span class=&#x22;text-warning&#x22;&#x3E;Warning Bar&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;60%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-warning&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;60&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;  
    &#x3C;/div&#x3E;
&#x3C;/div&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="tooltips" class="my-5">
                            <h5 class="mb-3">Using tooltips</h5>
                            <p>Pixel offers tooltips as text labels for the progress bars. To change the color use a modifier class <code class="text-danger">.bg-*</code> (eg. <code class="text-danger">.bg-primary</code>) on the <code class="text-danger">.progress-tooltip</code>                                element.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-3" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-5" data-toggle="tab" href="#tab-content-5" role="tab" aria-controls="tab-link-5" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-6" data-toggle="tab" href="#tab-content-6" role="tab" aria-controls="tab-link-6" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent3">
                                            <div class="tab-pane fade show active" id="tab-content-5" role="tabpanel" aria-labelledby="tab-content-5">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info">
                                                                <h4 class="progress-tooltip bg-success">Bootstrap</h4>
                                                                <div class="progress-percentage">
                                                                    <span>40%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress">
                                                                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info">
                                                                <h4 class="progress-tooltip bg-info">Angular</h4>
                                                                <div class="progress-percentage">
                                                                    <span>40%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress">
                                                                <div class="progress-bar bg-info" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info">
                                                                <h4 class="progress-tooltip bg-danger">Javascript</h4>
                                                                <div class="progress-percentage">
                                                                    <span>40%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress">
                                                                <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-6" role="tabpanel" aria-labelledby="tab-content-6">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;div class=&#x22;row&#x22;&#x3E;
    &#x3C;div class=&#x22;col-12&#x22;&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info&#x22;&#x3E;
                &#x3C;h4 class=&#x22;progress-tooltip bg-success&#x22;&#x3E;Bootstrap&#x3C;/h4&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;40%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-success&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;25&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info&#x22;&#x3E;
                &#x3C;h4 class=&#x22;progress-tooltip bg-info&#x22;&#x3E;Angular&#x3C;/h4&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;40%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-info&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;25&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info&#x22;&#x3E;
                &#x3C;h4 class=&#x22;progress-tooltip bg-danger&#x22;&#x3E;Javascript&#x3C;/h4&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;40%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-danger&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;25&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
    &#x3C;/div&#x3E;
&#x3C;/div&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="stripes" class="my-5">
                            <h5 class="mb-3">Stripes</h5>
                            <p>To used striped styles just add a modifier class <code class="text-danger">.progress-bar-striped</code> to the <code class="text-danger">.progress-bar</code> element.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-4" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-7" data-toggle="tab" href="#tab-content-7" role="tab" aria-controls="tab-link-7" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-8" data-toggle="tab" href="#tab-content-8" role="tab" aria-controls="tab-link-8" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent4">
                                            <div class="tab-pane fade show active" id="tab-content-7" role="tabpanel" aria-labelledby="tab-content-7">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info">
                                                                <h4 class="progress-tooltip bg-primary">Striped</h4>
                                                                <div class="progress-percentage">
                                                                    <span>40%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress">
                                                                <div class="progress-bar progress-bar-striped bg-primary" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-8" role="tabpanel" aria-labelledby="tab-content-8">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;div class=&#x22;row&#x22;&#x3E;
    &#x3C;div class=&#x22;col-12&#x22;&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info&#x22;&#x3E;
                &#x3C;h4 class=&#x22;progress-tooltip bg-primary&#x22;&#x3E;Striped&#x3C;/h4&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;40%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar progress-bar-striped bg-primary&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;25&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
    &#x3C;/div&#x3E;
&#x3C;/div&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="labels" class="my-5">
                            <h5 class="mb-3">Percentage label positioning</h5>
                            <p>Pixel also offers progress bars with the percentage label on top of the bar. Here's an example:
                            </p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-5" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-9" data-toggle="tab" href="#tab-content-9" role="tab" aria-controls="tab-link-9" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-10" data-toggle="tab" href="#tab-content-10" role="tab" aria-controls="tab-link-10" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent5">
                                            <div class="tab-pane fade show active" id="tab-content-9" role="tabpanel" aria-labelledby="tab-content-9">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info info-xl">
                                                                <div class="progress-label">
                                                                    <span class="text-primary">Task completed</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress progress-xl">
                                                                <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"><span>80%</span></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-10" role="tabpanel" aria-labelledby="tab-content-10">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;div class=&#x22;row&#x22;&#x3E;
    &#x3C;div class=&#x22;col-12&#x22;&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info info-xl&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-label&#x22;&#x3E;
                    &#x3C;span class=&#x22;text-primary&#x22;&#x3E;Task completed&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress progress-xl&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-primary&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;80&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;span&#x3E;80%&#x3C;/span&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
    &#x3C;/div&#x3E;
&#x3C;/div&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="sizes" class="my-5">
                            <h5 class="mb-3">Choose your size</h5>
                            <p>To change the size of the text label use the modifier class <code class="text-danger">.info-*</code> (eg. <code class="text-danger">.info-xl</code>).</p>
                            <p>To change the size of the progress bar use the modifier class <code class="text-danger">.progress-*</code> (eg. <code class="text-danger">.progress-xl</code>).</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-6" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-11" data-toggle="tab" href="#tab-content-11" role="tab" aria-controls="tab-link-11" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-12" data-toggle="tab" href="#tab-content-12" role="tab" aria-controls="tab-link-12" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent6">
                                            <div class="tab-pane fade show active" id="tab-content-11" role="tabpanel" aria-labelledby="tab-content-11">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info info-xl">
                                                                <div class="progress-label">
                                                                    <span class="text-primary">XL Progress Bar</span>
                                                                </div>
                                                                <div class="progress-percentage">
                                                                    <span>40%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress progress-xl">
                                                                <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info info-xl">
                                                                <div class="progress-label">
                                                                    <span class="text-secondary">LG Progress Bar</span>
                                                                </div>
                                                                <div class="progress-percentage">
                                                                    <span>60%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress progress-lg">
                                                                <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info">
                                                                <div class="progress-label">
                                                                    <span class="text-tertiary">MD Progress Bar</span>
                                                                </div>
                                                                <div class="progress-percentage">
                                                                    <span>60%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress">
                                                                <div class="progress-bar bg-tertiary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                        <div class="progress-wrapper">
                                                            <div class="progress-info">
                                                                <div class="progress-label">
                                                                    <span class="text-dark">SM Progress Bar</span>
                                                                </div>
                                                                <div class="progress-percentage">
                                                                    <span>60%</span>
                                                                </div>
                                                            </div>
                                                            <div class="progress progress-sm">
                                                                <div class="progress-bar bg-dark" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-12" role="tabpanel" aria-labelledby="tab-content-12">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;div class=&#x22;row&#x22;&#x3E;
    &#x3C;div class=&#x22;col-12&#x22;&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info info-xl&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-label&#x22;&#x3E;
                    &#x3C;span class=&#x22;text-primary&#x22;&#x3E;XL Progress Bar&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;40%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress progress-xl&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-primary&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;25&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info info-xl&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-label&#x22;&#x3E;
                    &#x3C;span class=&#x22;text-secondary&#x22;&#x3E;LG Progress Bar&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;60%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress progress-lg&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-secondary&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;60&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-label&#x22;&#x3E;
                    &#x3C;span class=&#x22;text-tertiary&#x22;&#x3E;MD Progress Bar&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;60%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-tertiary&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;60&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
        &#x3C;div class=&#x22;progress-wrapper&#x22;&#x3E;
            &#x3C;div class=&#x22;progress-info&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-label&#x22;&#x3E;
                    &#x3C;span class=&#x22;text-dark&#x22;&#x3E;SM Progress Bar&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;div class=&#x22;progress-percentage&#x22;&#x3E;
                    &#x3C;span&#x3E;60%&#x3C;/span&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;progress progress-sm&#x22;&#x3E;
                &#x3C;div class=&#x22;progress-bar bg-dark&#x22; role=&#x22;progressbar&#x22; aria-valuenow=&#x22;60&#x22;
                    aria-valuemin=&#x22;0&#x22; aria-valuemax=&#x22;100&#x22;&#x3E;&#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
    &#x3C;/div&#x3E;
&#x3C;/div&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 d-none d-lg-block py-md-1 doc-sidebar border-left">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <a href="#example" class="nav-link" data-smooth-scroll>Example</a>
                            </li>
                            <li class="nav-item">
                                <a href="#colors" class="nav-link " data-smooth-scroll>Colors</a>
                            </li>
                            <li class="nav-item">
                                <a href="#tooltips" class="nav-link " data-smooth-scroll>Tooltips</a>
                            </li>
                            <li class="nav-item">
                                <a href="#stripes" class="nav-link " data-smooth-scroll>Stripes</a>
                            </li>
                            <li class="nav-item">
                                <a href="#labels" class="nav-link " data-smooth-scroll>Labels</a>
                            </li>
                            <li class="nav-item">
                                <a href="#sizes" class="nav-link " data-smooth-scroll>Sizes</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- End of content -->
            </div>
        </div>
    </section>
    @@include('./_scripts.html', {
        "path": "../.."
    })
</body>

</html>